<template>
  <div>
    <div class="page-container-padding">
      <div>
        <div class="part-title">技术解盘</div>
        <el-tabs v-model="technologyDisk.tabName">
          <el-tab-pane label="管理" name="manage">
            <div class="manage-actions">
              <el-date-picker v-model="technologyDisk.manageDate" size="mini" />
              <el-button
                type="primary"
                size="mini"
                style="margin-left: 10px"
                :loading="technologyDisk.magLoading"
                @click="toGetResearchFile"
              >
                查询
              </el-button>
            </div>
            <div style="margin-top: 10px">
              <el-table border stripe :data="technologyDisk.manageTableData">
                <el-table-column prop="id" label="ID" width="150" />
                <el-table-column prop="title" label="标题" />
                <el-table-column prop="suffix" label="类型" width="70" />
                <el-table-column prop="variety_en" label="品种" width="110" />
              </el-table>
            </div>
            <div>
              <el-pagination
                background
                layout="total,prev,pager,next"
                :page-size="technologyDisk.managePageSize"
                :total="technologyDisk.manageTotal"
              />
            </div>
          </el-tab-pane>
          <el-tab-pane label="新增" name="create">
            <div class="create-actions">
              <el-date-picker v-model="technologyDisk.createDate" size="mini" />
              <el-button
                type="primary"
                size="mini"
                style="margin-left: 10px"
                disabled
                :loading="technologyDisk.createLoading"
                @click="toGetNewWorkFile"
              >
                获取
              </el-button>
              <el-button
                style="margin-left: 10px"
                type="success"
                size="mini"
                :loading="fileUploading"
                @click="toUploadFile"
              >
                上传到服务器
              </el-button>
            </div>

            <div style="margin-top: 10px; display: flex; align-items: top">
              <el-upload
                action=""
                size="mini"
                accept=".pdf"
                :auto-upload="false"
                :on-change="fileChange"
                :file-list="uploadfileList"
              >
                <el-button size="mini" type="primary">点击选择</el-button>
                <el-select
                  v-model="fileVarieties"
                  multiple
                  filterable
                  size="mini"
                  style="margin-left: 10px; width: 500px"
                >
                  <el-option
                    v-for="v in varietyList"
                    :key="v.code"
                    :value="v.code"
                    :label="`${v.name} (${v.code})`"
                  />
                </el-select>
                <div slot="tip" class="el-upload__tip">只能上传pdf文件</div>
              </el-upload>
            </div>

            <div style="margin-top: 10px">
              <el-table border stripe :data="technologyDisk.createTableData">
                <el-table-column prop="id" label="ID" width="50" />
                <el-table-column
                  prop="file_date"
                  label="文件日期"
                  width="110"
                />
                <el-table-column prop="name" label="名称" width="200">
                  <template #default="scope">
                    <div @click="toShowFile(scope.row)">
                      {{ scope.row.name }}
                    </div>
                  </template>
                </el-table-column>
                <el-table-column label="关联品种">
                  <template #default="scope">
                    <el-select
                      v-model="scope.row.varieties"
                      multiple
                      filterable
                      size="mini"
                    >
                      <el-option
                        v-for="v in varietyList"
                        :key="v.code"
                        :value="v.code"
                        :label="`${v.name} (${v.code})`"
                      />
                    </el-select>
                  </template>
                </el-table-column>
                <el-table-column lable="操作" width="70">
                  <template slot-scope="scope">
                    <el-button
                      size="mini"
                      type="text"
                      :disabled="scope.row.saveLoading"
                      @click="toSaveTechnicalFile(scope.row)"
                    >
                      保存
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>

    <el-dialog :visible.sync="showFilePreView" :title="showPreViewTitle">
      <div ref="docFile"></div>
    </el-dialog>
  </div>
</template>
<script>
  import { getFileBlob } from '@/api/fileHandler'
  import { getWorkFile } from '@/api/departmentWork/workFile'
  import { datetimeToStr } from '@/utils/datetimeUtils'
  import { RetrieveVariety } from '@/api/adminRuizhi/common'
  import {
    UploadResearchFile,
    RetrieveResearchFile,
  } from '@/api/adminRuizhi/dailyMaintain'
  export default {
    data() {
      return {
        varietyList: [],
        showFilePreView: false,
        showPreViewTitle: '',
        technologyDisk: {
          fileType: 1, // 1-技术解盘，2-资金流向 3-持仓分析
          tabName: 'manage',
          manageDate: new Date(),
          managePage: 1,
          managePageSize: 30,
          manageTotal: 0,
          magLoading: false,
          manageTableData: [],
          createDate: new Date(),
          createLoading: false,
          saveLoading: false,
          createTableData: [],
        },
        uploadfileList: [],
        uploadFile: null,
        fileVarieties: [],
        fileUploading: false,
      }
    },
    mounted() {
      RetrieveVariety().then((res) => {
        this.varietyList = res.data.data.map((item) => {
          item.varieties = []
          item.saveLoading = false
          return item
        })
      })
    },
    methods: {
      fileChange(file, fileList) {
        console.log(file, fileList)
        this.uploadfileList = fileList.slice(-1)
        this.uploadFile = file.raw
      },

      toUploadFile() {
        console.log(this.uploadfileList)
        if (!this.uploadFile || this.fileVarieties.length < 1) {
          this.$baseMessage('请选择文件和关联品种', 'error')
          return
        }
        const fileDate = datetimeToStr(
          this.technologyDisk.createDate,
          true,
          '-'
        )
        let fd = new FormData()
        fd.append('file', this.uploadFile)
        fd.append('file_type', 'TECHNICAL')
        fd.append('file_date', fileDate)
        fd.append('varieties', this.fileVarieties)
        this.fileUploading = true
        UploadResearchFile(fd)
          .then((res) => {
            this.$baseMessage(res.message, 'success')
            this.fileUploading = false
            this.uploadFile = null
            this.uploadfileList = []
          })
          .catch(() => {
            this.fileUploading = false
          })
      },

      // 查询已保存的文件
      toGetResearchFile() {
        RetrieveResearchFile(
          'TECHNICAL',
          this.technologyDisk.managePage,
          this.technologyDisk.managePageSize
        ).then((res) => {
          const retData = res.data
          this.technologyDisk.manageTableData = retData.rows
          this.technologyDisk.manageTotal = retData.total_count
        })
      },

      toGetNewWorkFile() {
        getWorkFile(
          this.technologyDisk.fileType,
          1,
          10,
          datetimeToStr(this.technologyDisk.createDate, true, '-')
        ).then((res) => {
          console.log(res)
          this.technologyDisk.createTableData = res.data.data
        })
      },

      toSaveTechnicalFile(row) {
        if (row.varieties.length < 1) {
          this.$baseMessage('请选择关联品种后再保存!', 'error')
          return
        }
        row.saveLoading = true
        const fileData = {
          file_date: row.file_date,
          varieties: row.varieties,
          title: row.name,
          file_type: 'TECHNICAL',
          filepath: row.file_url,
        }
        // UploadResearchFile(fileData).then((res) => {
        //   this.$baseMessage(res.message, 'success')
        // })
      },

      toShowFile(row) {
        this.showPreViewTitle = row.name
        getFileBlob(row.file_url).then(({ data }) => {
          this.$docxView.renderAsync(data, this.$refs.docFile)
        })
        this.showFilePreView = true
      },
    },
  }
</script>
<style scope lang="scss">
  .part-title {
    padding-left: 10px;
    background-color: #eee;
    line-height: 22px;
    color: #ff9800;
  }
  .manage-actions,
  .create-actions {
    display: flex;
    align-items: center;
  }
</style>
